<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {

            width: 600px;
            padding-left: 20px;
            height: 280px;
            border: 1px solid darkgray;
        }

        span {
            color: red;

        }
    </style>
    <script>
        function jcname() {
            var name = document.getElementById("name").value
            var namespan = document.getElementById("nameSpan")
            if (name.length < 6) {
                namespan.innerHTML = "Please input more character than 5"
            } else {
                namespan.innerHTML = "Ok!"
                return true;
            }


        }

        function checkCode() {
            var name1 = document.getElementById("code1").value
            var name2 = document.getElementById("code2").value
            var span1 = document.getElementById("codeSpan1")
            var span2 = document.getElementById("codeSpan2")
            if (name1.length < 6) {
                span1.innerHTML = "Password need 6 at least"
            } else if (name2.length < 6) {
                span1.innerHTML = ""
                span2.innerHTML = "Password need 6 at least"
            } else if (name2.length != name1.length || name1 != name2) {
                span2.innerHTML = "Password must be same"
                name1.innerHTML = ""
                name2.innerHTML = ""
            } else {
                span2.innerHTML = "Password ok!"
                return true
            }

        }

        function checkEmail() {
            var mail = document.getElementById("email").value
            var mailspan = document.getElementById("emailSpan")
            var atpos = mail.indexOf("@")
            var dotpos = mail.lastIndexOf(".")
            // alert("atpos:" + atpos + " dotpos:" + dotpos)
            if (mail.length < 5) {
                // alert(mail)
                mailspan.innerHTML = "Input email!"
            } else if (atpos < 1 || (dotpos - atpos) < 2) {

                mailspan.innerHTML = "email need @ and ."
            } else {
                mailspan.innerHTML = "email ok!"
                return true
            }
        }

        function checkform() {
            if (jcname() && checkCode() && checkEmail())
                return true
            else
                return false
        }
    </script>
</head>
<body>
<form id="regist" onsubmit="return checkform()" action="/hi" method="get">
    <h3>注册表单</h3>
    用户名：<input type="text" id="name" name="username" onblur="jcname()"/>
    <span id="nameSpan"></span><br><br>

    密码：<input type="password" id="code1" name="password" onblur="checkCode()"/>
    <span id="codeSpan1"></span><br/><br/>
    再次输入密码：<input type="password" id="code2" name="password" onblur="checkCode()"/>
    <span id="codeSpan2"></span><br/><br/>
    邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
    <span id="emailSpan"></span><br/><br/>
    <input type="submit" value="注册"/>
    <input type="reset" value="重置"/>
</form>
</body>
</html>